<template>
  <page-layout class="pie-hart">
    <a-card title="项目信息" :bordered="false" style="margin-bottom: 15px;">
      <div class="project">
        <h4>项目ID:</h4>
        <span>{{ project.id }}</span>
      </div>
      <div class="project">
        <h4>项目名称:</h4>
        <span>{{ project.name }}</span>
      </div>
    </a-card>
    <a-card title="公告" :bordered="false">
      <div class="content">
        <h2>version2.0</h2>
        <article>
          <div class="front-end">
            <b>学员端</b>
            <ul>
              <li>增加人物管理模块。</li>
              <li>增加关于我们模块。</li>
              <li>案例管理新增分类功能与添加相关人物功能。</li>
            </ul>
          </div>
          <div class="back-end">
            <b>超管端</b>
            <ul>
              <li>
                项目列表增加查看选中项目的轮播图、人物等模块的内容。
              </li>
              <li>案例管理可选择项目下的分类进行查看。</li>
            </ul>
          </div>
        </article>
      </div>
    </a-card>
  </page-layout>
</template>

<script>
import PageLayout from "@/layouts/PageLayout";
export default {
  components: { PageLayout },
  data() {
    return {
      project: null
    }
  },
  created() {
    this.project = this.$store.state.account.user.Projects[0]
  }
};
</script>

<style lang="scss" scoped>
.icon {
  display: flex;
  align-items: center;
  gap: 1rem;
}

h4 {
  margin: 5px 0;
}

.project {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 150px;
}
</style>
